<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort="{prop: 'date', order: 'descending'}"
    @sort-change="handleSortChange"
  >
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :sortable="column.sortable"
      :width="column.width"
    >
    </el-table-column>
    
    <el-table-column
      v-if="hasActions"
      label="Actions"
      width="120"
    >
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)"
        >Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    hasActions: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleSortChange({ column, prop, order }) {
      this.$emit('sort-change', { column, prop, order })
    },
    handleEdit(index, row) {
      this.$emit('edit', { index, row })
    },
    handleDelete(index, row) {
      this.$emit('delete', { index, row })
    }
  }
}
</script>

<style scoped>
</style>
